<template>

  <div class='hotshowing'>

    <!-- 电影列表开始 -->
    <div ref="moviesScroll" class="moviesWrapper">
      <div class="movies">

        <!-- 最受欢迎的电影开始 -->
        <div class="expectWrapper" style="overflow-x:scroll;" ref="expectScroll">
          <div class="expect" :style="{width:getExpectsWidth}">
            <expect-item v-for="item in expect.datalist" :key="item.id" :item="item"></expect-item>
          </div>
        </div>
        <!-- 最受欢迎的电影结束 -->

        <MovieItem v-for="item in movies.movieList" :key="item.id" :movie="item"></MovieItem>
      </div>
    </div>
    <!-- 电影列表结束 -->

  </div>

</template>
<script>
import ExpectItem from "./ExpectItem"
import MovieItem from "./MovieItem"
import { get, post } from "@/api/http"
import BScroll from "@better-scroll/core"
import { Notify } from "vant"
import Pullup from "@better-scroll/pull-up"
import { mapMutations } from "vuex"
BScroll.use(Pullup)

export default {
  data() {
    return {
      expect: {
        datalist: [],
        //每页展示的数据条数
        pagesize: 6,
        //起始的索引值
        start: 0,
        //是否有更多的数据
        hasMore: true
      },
      movies: {
        movieIds: [],
        movieList: [],
        //每页展示的数据条数
        pagesize: 10,
        //起始的索引值
        start: 12,
        //是否有更多的数据
        hasMore: true
      }
    }
  },
  computed: {
    getExpectsWidth() {
      return this.expect.datalist.length * 95 + "px"
    }
  },
  components: {
    ExpectItem,
    MovieItem
  },
  created() {
    this.getMostExpect()
    this.getMovieList()
  },
  methods: {
    ...mapMutations(["setShowAD"]),
    async getMostExpect() {
      let rs = await get("/api/coming", {
        _start: this.expect.start,
        _end: this.expect.start + this.expect.pagesize
      })
      this.expect.datalist.push(...rs.data)
      if (rs.data.length < this.expect.pagesize) {
        this.expect.hasMore = false
      }
      //数据已经渲染完成（已经生成dom）
      this.$nextTick(() => {
        // this.setExpectScroll()
      })
    },
    setExpectScroll() {
      if (this.expectScroll) {
        this.expectScroll.refresh()
        return
      }
      this.expectScroll = new BScroll(this.$refs.expectScroll, {
        scrollX: true,
        probeType: 3 // listening scroll hook
      })

      this.expectScroll.on("scrollEnd", () => {
        console.log("end")
        if (!this.expect.hasMore) {
          Notify({ type: "primary", message: "没有更多的数据了" })
          return
        }
        this.expect.start += this.expect.pagesize
        this.getMostExpect()
      })
    },

    setMoviesScroll() {
      if (this.moviesScroll) {
        //拖动滚动条完成
        this.moviesScroll.finishPullUp()
        //重新计算滚动条
        this.moviesScroll.refresh()
        return
      }

      this.moviesScroll = new BScroll(this.$refs.moviesScroll, {
        scrollY: true,
        pullUpLoad: true,
        click:true,
        tab:true,
        eventPassthrough:"horizontal"
      })
      //拖动到底部
      this.moviesScroll.on("pullingUp", () => {
        console.log("up...")
        if (this.movies.hasMore) {
          //翻页数据的获取
          this.getMoreMovieList()
        } else {
          Notify({ type: "primary", message: "没有更多的数据了" })
        }
      })

      this.moviesScroll.on("scroll", params => {
        console.log(params)
        if (params.y < -50) {
          this.setShowAD(false)
        } else {
          this.setShowAD(true)
        }
      })
    },
    //请求第一页的数据
    async getMovieList() {
      let rs = await get("/ajax/movieOnInfoList", {})
      this.movies.movieIds = rs.data.movieIds
      this.movies.movieList.push(...rs.data.movieList)
      console.log(rs)
      //确保dom渲染完成
      this.$nextTick(() => {
        this.setMoviesScroll()
      })
    },
    //请求除了第一页之外的其它页面的数据
    async getMoreMovieList() {
      let rs = await get("/ajax/moreComingList", {
        token: "",
        movieIds: this.movies.movieIds
          .slice(this.movies.start, this.movies.start + this.movies.pagesize)
          .join(",")
      })
      //更新起始索引值
      this.movies.start += this.movies.pagesize
      //是否还有更多的数据
      if (rs.data.coming.length < this.movies.pagesize) {
        this.movies.hasMore = false
      }
      //在历史数据基础上做累加
      this.movies.movieList.push(...rs.data.coming)
      //dom渲染完成
      this.$nextTick(() => {
        this.setMoviesScroll()
      })
    }
  },
  activated() {
    console.log("热映组件激活")
  },
  deactivated() {
    console.log("热映组件失活")
  }
}
</script>

<style lang="scss" scoped>
.hotshowing {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  .expectWrapper {
    height: 137px;
  }
  .moviesWrapper {
    flex: 1;
    overflow: hidden;
  }
}

.expect {
  display: flex;
}
</style>


